<template>
  <div>
    <van-nav-bar title="个人中心" />
    <div id="avatar">
      <img class="img" :src="path + item.photo" preview />
      <p>{{ item.username }}</p>
    </div>
    <div>
      <van-cell-group>
        <van-cell
          title="钱包余额"
          size="large"
          icon="balance-o"
          :value="item.wallet"
        />
        <van-cell
          title="收货地址"
          size="large"
          icon="location-o"
          is-link
          value=""
          to="list"
        />
      </van-cell-group>
      <van-collapse v-model="activeName" accordion>
        <van-collapse-item
          title="交易收藏"
          name="1"
          size="large"
          icon="like-o"
        >
          <van-cell-group
          class="item_group"
           v-for="view in views"
           :key="view.id">
            <van-card
              :price="view.yourprice"
              :desc="view.content"
              :title="view.title"
              :thumb="path + view.img"
            >
           <template #footer>
           <van-button round type="info" @click="off_red($event)" :id="view.id" size="mini">取消收藏</van-button>
           </template>
            </van-card>
          </van-cell-group>
        </van-collapse-item>
      </van-collapse>
    </div>
    <my-bottom :active="3"></my-bottom>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import MyBottom from "@/components/MyBottom.vue";
import { ImagePreview } from "vant";
import { singleForm,offRed } from "../api";
import { Toast } from "vant";

export default {
  components: { MyBottom },

  data() {
    return {
      item: [],
      views: [],
      activeName: ["1"],
    };
  },
  methods: {
     off_red(a){
      offRed({id: a.currentTarget.id})
            .then(res =>{
                console.log(res);
                Toast("已取消");
                this.$router.go(0);
            })
            .catch( (error) => {
              console.log(error);
            });
    }
  },
  computed: {
    ...mapState({
      path: (state) => state.path,
    }),


  },
  created() {
    singleForm({ username: localStorage.getItem("username") })
      .then((res) => {
        console.log(res);
        this.item = res.data;
      })
      .catch((error) => {
        console.log(error);
      });

     axios
    .get("/api/shandview.php")
    .then((res) => {
      this.views = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
/* .van-nav-bar{
  background-color: rgb(24,154,100);
} */
>>> .van-nav-bar {
  background-color: rgb(24, 154, 100);
}
>>> .van-nav-bar__title {
  font-size: 20px;
  color: azure;
}
>>> .van-cell__value {
  font-size: 17px;
  color: rgb(223, 49, 49);
}
#avatar {
  text-align: center;
  /* margin: 25px; */
  padding: 25px;
  background-color: rgb(24, 154, 100);
}
#avatar img {
  margin: auto;
  border-radius: 100px;
  width: 90px;
  height: 90px;
  padding: 10px azure;
}
#avatar p {
  margin: 0;
  color: azure;
}
.item_group{
  margin-bottom: 50px;
}
/* #test{
  text-align: center;
} */
</style>
